<%-- 
    Document   : inde
    Created on : 18-may-2012, 17:45:59
    Author     : Administrador
--%>
<% 
    String s_path = request.getContextPath(); 
    String msg = "";
    if(request.getParameter("msg") !=null){
        msg = request.getParameter("msg");
    }
    session = request.getSession(true);
    session.removeAttribute("qaptcha_key");
%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SI-ESFM</title>
        <meta name="description" content="Derechos Reservados SI-ESFM" />
        <link rel="stylesheet" href="<%=s_path%>/css/styles.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/menu/style.css" type="text/css" />
        <link rel="shortcut icon" href="<%=s_path%>/images/ico.png" type="image/png"/>
        <link rel="stylesheet" href="<%=s_path%>/css/qaptcha/QapTcha.jquery.css" type="text/css" />
        <style type="text/css">
            
            body{
                font-family: Arial, Helvetica, sans-serif;
                font-size:12px;
                font-weight: normal;
                background-color:#3267ad;
            }
            .contacto{
                border: 1px solid #000;
                border-radius: 6px;
                width: 100%;
                padding: 10px 10px 6px;
                margin-top: 10px;
                background-color: white;
                box-shadow: 0px 5px 10px #013079, 0 0 0 5px #003a96 inset;
                position: relative;
            }
        </style>
        <script type="text/javascript" src="<%=s_path%>/js/md5.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/validate/additional-methods.min.js"></script>
        <!-- es para el qaptcha -->
        
        <script type="text/javascript" src="<%=s_path%>/js/qaptcha/jquery-ui.js"></script>
	<script type="text/javascript" src="<%=s_path%>/js/qaptcha/jquery.ui.touch.js"></script>
	<script type="text/javascript" src="<%=s_path%>/js/qaptcha/QapTchaJquery.js"></script>
        <script type="text/javascript">
            var hide = "";
            $(document).ready(function(){                
                $("#v1").val("");
                $("#p2").val("");
                $("#v3").val("");
                $("#p4").val("");
                $("#v5").val("");
                $("#p6").val("");
                
                //control para el administrador
                $("#formAdministr").validate({
                    ignoreTitle: true,
                    messages:{
                        v5:{required:'Ingrese cuenta',alphanumeric:'Solo |a-z|A-Z|0-9| _ |'},
                        p6:{required:'Ingrese contrase&ntilde;a',alphanumeric:'Solo |a-z|A-Z|0-9| _ |'}
                    }
                });
                $("#formAdministr").submit(function(){
                    encriptar(6);
                    //var text_html = '<div class="notice">';
                });
                
                // control para el docente
                $("#formDoc").validate({
                    ignoreTitle: true,
                    messages:{
                        v3:{required:'Ingrese cuenta',alphanumeric:'Solo |a-z|A-Z|0-9| _ |'},
                        p4:{required:'Ingrese contrase&ntilde;a',alphanumeric:'Solo |a-z|A-Z|0-9| _ |'}
                    }
                });
                $("#formDoc").submit(function(){
                    encriptar(4);
                });
                
                // control para el estudiante
                $("#formEst").validate({
                    ignoreTitle: true,
                    messages:{
                        v1:{required:'Ingrese c&oacute;digo',digits:'Ingrese n&uacute;meros'},
                        p2:{required:'Ingrese contrase&ntilde;a',digits:'Ingrese n&uacute;meros'}
                    }
                });
                $("#formEst").submit(function(){
                    encriptar(2);
                });
    
                // para el qaptcha
                $('.QapTcha').QapTcha({disabledSubmit:true,autoRevert:true,autoSubmit:false});
                
                // iteramos todos los botones cuando se le hacerca con el mouse
                $(".botonDisabled").bind("click mouseenter",function(e){//$("input").bind("click mouseenter mouseleave",function(e){
                    $( "#"+$(this).attr("id") ).addClass("boton");
                });
                
            });
            
            // actualizar la variable luego encriptarlo para cualquier submit
            function encriptar(val){
                hide = "";
                if( $.trim( $("#p"+val).val() ) != "" ){
                    hide = $.trim( $("#p"+val).val() );
                    $("#v"+val).val( MD5(hide) );
                }
            }
            // para mostrar los menus dependiendo d q opcion fue clikado
            function menu(op){
                switch(parseInt(op,10)){
                    case 1:
                        $("#admin").css("display", "none");// principal
                        $("#docente").css("display", "none");
                        $("#estudiante").css("display", "none");
                        $("#intro1").css("display", "block");
                        $("#intro2").css("display", "block");
                        break;
                    case 2:
                        $("#htmlA").html("");
                        $("#intro1").css("display", "none");// admin
                        $("#intro2").css("display", "none");
                        $("#docente").css("display", "none");
                        $("#estudiante").css("display", "none");
                        $("#admin").css("display", "block");
                        $("#v5").focus();
                        break;
                    case 3:
                        $("#htmlD").html("");
                        $("#intro1").css("display", "none");// docente
                        $("#intro2").css("display", "none");
                        $("#admin").css("display", "none");
                        $("#estudiante").css("display", "none");
                        $("#docente").css("display", "block");
                        $("#v3").focus();
                        break;
                    case 4:
                        $("#htmlE").html("");
                        $("#intro1").css("display", "none");// estudiante
                        $("#intro2").css("display", "none");
                        $("#admin").css("display", "none");
                        $("#docente").css("display", "none");
                        $("#estudiante").css("display", "block");
                        $("#v1").focus();
                        break;  
                    case 5:
                        location.href="<%=s_path%>/Foros?accion=1";                       
                        break;
                }
            }
        </script>
        
    </head>
    <body>        
        <div id="top-wrap">
            <!-- cabeza principal -->
            <div id="header-wrap">
                <div id="header">
                    <h1><a href="index.html"><img src="<%=s_path%>/images/logo.png" alt="logo" height="46" width="190"></a></h1><!-- logo here -->
                        <div style="float: left;height:40px;position:relative; top:27px;">
                            <ul id="css3menu_top" class="topmenu">			
                                <li class="topfirst"><a href="javascript:menu(1)" title="Principal"><img src="<%=s_path%>/css/menu/home.png" alt="home.png"/>Principal</a></li>
                                <li class="topmenu"> <a href="javascript:menu(2)" title="Administrativos"><img src="<%=s_path%>/css/menu/admin.png" alt="admin.png"/>Administrativos</a></li>
                                <li class="topmenu"> <a href="javascript:menu(3)" title="Docentes"><img src="<%=s_path%>/css/menu/docente.png" alt="docente.png"/>Docentes</a></li>
                                <li class="topmenu"> <a href="javascript:menu(4)" title="Estudiantes"><span><img src="<%=s_path%>/css/menu/estudiante.png" alt="Demos"/>Estudiantes</span></a></li>
                                <li class="topmenu"> <a href="javascript:menu(5)" title="Comunidad"><img src="<%=s_path%>/css/menu/postulantes.png" alt="postulante.png"/>Foros</a></li>                                
                            </ul>
                            <p style="display:none"><a href="#">CAR Drop Down CSS Menu Css3Menu.com</a></p><!-- CAR no aparece -->
                            <!--end of navigation-->
                        </div>
                </div>
            </div><!--header ends here-->
            
            <!-- fin cabecera principal -->
            <!-- segunda cabeza -->
            <div class="banner-wrap">
                <div class="banner-inner">
                    <div id="loopedSlider">
                        <div class="container">
                            <div style="width: auto; left: 0px;" class="slides">
                                <div style="position: absolute; left: 0px; display: block;" class="banner">
                                    <div class="leftContent" style="position: absolute; left: 0px; top: -50px; display: block;">
                                        
                                        <h2>Sistema de Informaci&oacute;n Web.</h2>
                                        <p id="intro1" style="display: block">Le ofrece informaci&oacute;n amplia, r&aacute;pida y totalmente actualizada sobre el Sistema de Información Escuela Superior de Formaci&oacute;on de Maestros. 
                                        La informaci&oacute;n que se presenta esta destinada a Administradores, Docentes y Estudiantes. Los usuarios podr&aacuente;n realizar 
                                        transacciones academicas y podran adquirir iformaci&oacute;n en sus respectivos &Aacute;mbitos.</p>                                        
                                        <p id="intro2" style="display: block">El Sistema presenta Informaci&oacute;n de tipo Horarios, Notas, Kardex, Informaci&oacute;n Biogr&aacute;fica, Foros y Ademas un Sistema De Iscripci&oacute;n.</p>
                                        <!-- Administrador -->
                                        <fieldset style="display: none" class="contacto" id="admin">
                                            <form method="post" name="formAdministr" id="formAdministr" action="<%=s_path%>/Principal?accion=5">
                                                <div style="clear: left; text-align: center;"><h3>Iniciar Sesi&oacute;n Administrativo</h3></div>
                                                <div style="clear:both">
                                                    <div style="clear:left;text-align: center;color: red;font-family: monospace;font-size: 12px" id="htmlA"><%=msg%></div>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">Cuenta :</label>
                                                    <input type="text" name="v5" id="v5" class="form_input_align required alphanumeric" title="Ingrese la Cuenta de Administrador" maxlength="20"/>
                                                    <label  class="error">*</label>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">Contrase&ntilde;a :</label>
                                                    <input type="password" name="p6" id="p6" class="form_input_align required alphanumeric" title="Ingrese la Contrase&ntilde;a de Administrador" maxlength="25"/>
                                                    <input type="hidden" name="v6" value="" id="v6" maxlength="64"/>
                                                    <label class="error">*</label>
                                                </div>
                                                <!--<div style="clear: both">
                                                    <label class="form_align25"><b><i>Anti-Spam</i></b></label>
                                                    <div class="QapTcha"></div>
                                                </div>--><!--<label style="float:left; margin-left:0.2em;color: red;"><i>Deslice el scrool hacia la derecha</i></label>-->
                                                
                                                <div style="clear: both">
                                                    <label class="form_align25">&nbsp;</label>
                                                    <table border="0" style="float: left">
                                                        <tr>
                                                            <td style="text-align:right"><br/><input type="submit" value="Ingresar" class="botonDisabled" id="botonSub" title="Pulse aqu&iacute; para Ingresar "/>&nbsp;&nbsp;</td>
                                                            <td><br/>&nbsp;&nbsp;<input type="reset" value="Limpiar" class="botonDisabled" id="limpiarAd" title="Pulse aqu&iacute; para Restablecer Campos"/></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div style="clear: both">
                                                    <label style="clear: left"><a href="#" class="links">¿No puede acceder a tu cuenta?</a></label>
                                                </div>
                                                <br/>
                                                
                                            </form>
                                        </fieldset>
                                        <!-- docente -->
                                        
                                        <fieldset style="display: none" class="contacto" id="docente">
                                            <form method="post" name="formDoc" id="formDoc" action="<%=s_path%>/Principal?accion=3">
                                                <div style="clear: left; text-align: center;"><h3>Iniciar Sesi&oacute;n Docente.</h3></div>
                                                <div style="clear:both">
                                                    <div style="clear:left;text-align: center;color: red;font-family: monospace;font-size: 12px" id="htmlD"><%=msg%></div>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">Cuenta :</label>
                                                    <input type="text" name="v3" id="v3" value="" class="form_input_align required alphanumeric" title="Ingrese la Cuenta de Docente" maxlength="20"/>
                                                    <label class="error">*</label>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">Contrase&ntilde;a :</label>
                                                    <input type="password" name="p4" value="" id="p4" class="form_input_align required alphanumeric" title="Ingrese la Contrase&ntilde;a de Docente" maxlength="25"/>
                                                    <input type="hidden" name="v4" value="" id="v4" maxlength="64"/>
                                                    <label class="error">*</label>
                                                </div>                                                
                                                <div style="clear: both">
                                                    <label class="form_align25">&nbsp;</label>
                                                    <table border="0" style="float: left">
                                                        <tr>
                                                            <td style="text-align:right"><br/><input type="submit" value="Ingresar" class="botonDisabled" id="botonSubD" title="Pulse aqu&iacute; para Ingresar "/>&nbsp;&nbsp;</td>
                                                            <td><br/>&nbsp;&nbsp;<input type="reset" value="Limpiar" class="botonDisabled" id="limpiarD" title="Pulse aqu&iacute; para Restablecer Campos"/></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div style="clear: both">
                                                    <label style="clear: left"><a href="#" class="links">¿No puede acceder a tu cuenta?</a></label>
                                                </div>
                                                <br/>
                                            </form>
                                        </fieldset>
                                        <!-- estudiante -->
                                        <fieldset style="display: none" class="contacto" id="estudiante">
                                            <form method="post" name="formEst" id="formEst" action="<%=s_path%>/Principal?accion=1">
                                                <div style="clear: left; text-align: center;"><h3>Iniciar Sesi&oacute;n Estudiante</h3></div>
                                                <div style="clear:both">
                                                    <div style="clear:left;text-align: center;color: red;font-family: monospace;font-size: 12px" id="htmlE"><%=msg%></div>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">C&oacute;digo :</label>
                                                    <input type="text" name="v1" id="v1" class="form_input_align required digits" title="Ingrese el C&oacute;digo de Estudiante" maxlength="20"/>
                                                    <label class="error">*</label>
                                                </div>
                                                <div style="clear: both">
                                                    <label class="form_align25">Contrase&ntilde;a :</label>
                                                    <input type="password" name="p2" id="p2" class="form_input_align required digits" title="Ingrese la Contrase&ntilde;a de Estudiante" maxlength="25"/>
                                                    <input type="hidden" name="v2" value="" id="v2" maxlength="64"/>
                                                    <label class="error">*</label>
                                                </div>                                                
                                                <div style="clear: both">
                                                    <label class="form_align25">&nbsp;</label>
                                                    <table border="0" style="float: left">
                                                        <tr>
                                                            <td style="text-align:right"><br/><input type="submit" value="Ingresar" class="botonDisabled" id="botonSubE" title="Pulse aqu&iacute; para Ingresar "/>&nbsp;&nbsp;</td>
                                                            <td><br/>&nbsp;&nbsp;<input type="reset" value="Limpiar" class="botonDisabled" id="limpiarE" title="Pulse aqu&iacute; para Restablecer Campos"/></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div style="clear: both">
                                                    <label style="clear: left"><a href="#" class="links">¿No puede acceder a tu cuenta?</a></label>
                                                </div>
                                                <br/>
                                            </form>
                                            <%
                                                String tipo = "";
                                                if(request.getParameter("tipo") != null){
                                                    tipo = request.getParameter("tipo");
                                                    out.println("<script type='text/javascript'>");
                                                    out.println("   switch( parseInt("+tipo+",10) ){");
                                                    out.println("       case 2:");
                                                    out.println("           $('#intro1').css('display','none');");
                                                    out.println("           $('#intro2').css('display','none');");
                                                    out.println("           $('#admin').css('display','block');");
                                                    out.println("           break;");
                                                    out.println("       case 3:");
                                                    out.println("           $('#intro1').css('display','none');");
                                                    out.println("           $('#intro2').css('display','none');");
                                                    out.println("           $('#docente').css('display','block');");
                                                    out.println("           break;");
                                                    out.println("       case 4:");
                                                    out.println("           $('#intro1').css('display','none');");
                                                    out.println("           $('#intro2').css('display','none');");
                                                    out.println("           $('#estudiante').css('display','block');");
                                                    out.println("           break;");
                                                    out.println("   }");
                                                    out.println("</script>");
                                                }
                                            %>
                                        </fieldset>
                                        
                                    </div><!--end of left container-->
                                    <img src="<%=s_path%>/images/main.png" alt=" " height="280" width="550"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--end of inner banner-->        
            </div><!--end of sliding banner-->
            <!-- fin segunda cabaecera -->
            <!-- cuerpo -->
            <div id="bodywrap">
                <div id="content-wrap">
                    <div class="leftPan">
                        
                        <h3 id="overview">Visi&oacute;n</h3>
                            <p>Formamos profesionales con alto sentido cr&iacute;tico, reflexivo, autocr&iacute;ticos,
                               propositivos, innovadores e investigadores, mediante procesos educativos de excelencia
                               en el &aacute;mbito de la especialidad y el &aacute;mbito pedag&oacute;gico, sobre la base
                               del conocimiento de la realidad, la identidad cultural y el proceso socio-hist&oacute;rico
                               del pa&iacute;s, comprometidos con la democracia, las transformaciones sociales.
                            </p>
                        <div class="innerLeft">
                            
                        </div>
                        <!--aqui entra el div de mision lo estoy cordando nomas-->
                                           
                    </div><!--end of leftPan-->

                    <div class="rightPan">
                        <h3 id="overview">Misi&oacute;n</h3>
                        <p>Desarrollamos e implementamos una formaci&oacute;n profesional integral human&iacute;stica, cientifica,
                            t&eacute;cnica, tecnol&oacute;gica y productiva, descolonizadora, comunitaria, intracultural, intercultural
                            y pluriligue, mediante procesos educativos de excelencia con igualdad de oportunidades y condiciones para que
                            las bolivianas y bolivianos vivamos bien.
                       </p>
                                               
                    </div><!--end of rightPan-->
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->    
            
            <!-- footer -->
            <%@include file="../footer.jsp" %>
            
	</div><!--end of outer-wrapper-->
    </body>
</html>
